<!-- Hotel.vue -->
<template>
  <div class="container">
    <el-main>
      <el-row type="flex" justify="center">
        <el-col :span="18">
          <el-form :model="searchForm" inline class="search-form">
            <el-form-item>
              <el-input v-model="searchForm.city" placeholder="目的地/酒店名称"></el-input>
            </el-form-item>

            <el-form-item label="预定日期">
              <el-date-picker
                  v-model="searchForm.rentalDateRange"
                  type="daterange"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="入住日期"
                  end-placeholder="退房日期"
                  :picker-options="datePickerOptions"
                  @change="calculateDays"
              ></el-date-picker>
              <span v-if="searchForm.rentalDateRange && searchForm.rentalDateRange[0]">
                共{{ rentalDays }}天
                </span>
            </el-form-item>

            <el-form-item>
              <el-select v-model="searchForm.guests" placeholder="客人数">
                <el-option label="1位" value="1"></el-option>
                <el-option label="2位" value="2"></el-option>
                <el-option label="3位" value="3"></el-option>
                <el-option label="4位" value="4"></el-option>
                <el-option label="5位" value="5"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchForm.starRating" placeholder="星级">
                <el-option label="1星级" value="1"></el-option>
                <el-option label="2星级" value="2"></el-option>
                <el-option label="3星级" value="3"></el-option>
                <el-option label="4星级" value="4"></el-option>
                <el-option label="5星级" value="5"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchHotels">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-row>
        <div class="container">
          <div class="movies-channel">
            <div>
              <el-button id="code-dropdown-btn" class="dropdown-btn" @click="toggleCodeVisibility">
                <i :class="showCode ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i> {{
                  showCode ? '关闭菜单' : '打开菜单'
                }}
              </el-button>
              <div v-show="showCode">
                <el-col>
                  <!-- 在这里添加筛选条件，例如价格、星级、区域等 -->
                  <ul class="tags-lines">

                    <li class="tags-line tags-line-border">
                      <div class="tags-title">地区 :</div>&nbsp;
                      <span v-for="position in positionList"
                            :key="position.id" @click="queryArea($event,position.id)">
                          <el-button size="small" round>{{ position.cname }}</el-button>
                        </span>
                    </li>

                    <li class="tags-line tags-line-border">
                      <div class="tags-title">星级 :</div>&nbsp;
                      <span v-for="ranting in starRatingList"
                            :key="ranting.starRating" @click="queryStarRating($event,ranting.starRating)">
                            <el-button size="small" round>{{ ranting.starName }}</el-button>
                          </span>
                    </li>

                    <li class="tags-line tags-line-border">
                      <div class="tags-title">价格 :</div>&nbsp;
                      <span v-for="price in priceList"
                            :key="price.prompt" @click="queryPrice($event,price.startPrice,price.endPrice)">
                            <el-button size="small" round>{{ price.prompt }}</el-button>
                          </span>
                    </li>

                    <li class="tags-line tags-line-border">
                      <div class="tags-title">评分 :</div>&nbsp;
                      <span v-for="score in scoreList"
                            :key="score.score" @click="queryScore($event,score.score)">
                            <el-button size="small" round>{{ score.tip }}</el-button>
                          </span>
                    </li>

                    <li class="tags-line tags-line-border">
                      <div class="tags-title">评论数 :</div>&nbsp;
                      <span v-for="commentsNum in commentsNumList"
                            :key="commentsNum.commentsNum" @click="queryCommentsNum($event,commentsNum.commentsNum)">
                            <el-button size="small" round>{{ commentsNum.commentsNumTip }}</el-button>
                          </span>
                    </li>

                    <li class="tags-line tags-line-border">
                      <div class="tags-title">酒店设施 :</div>&nbsp;
                      <span v-for="facility in facilityList" :key="facility.id" @click="queryFacility(facility.id)">
                       <el-button size="small" :class="buttonClass(facility.id)"
                                  :style="{ backgroundColor: selectedFacilities.includes(facility.id) ? 'black' : 'white' }"
                                  round>{{ facility.name }}</el-button>
                       </span>
                    </li>

                  </ul>
                </el-col>
              </div>
            </div>
            <el-col :span="18">
              <el-table :data="hotels" style="width: 100%" stripe>
                <el-table-column prop="images" label="图片">
                  <template slot-scope="scope">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="dialogImageUrl + scope.row.images[0]"
                    >
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="酒店名称" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址" width="180">
                </el-table-column>
                <el-table-column prop="star" label="星级" width="80">
                </el-table-column>
                <el-table-column prop="price" label="价格" width="80">
                </el-table-column>
                <el-table-column label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button size="small" @click="viewHotel(scope.row)">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-empty description="下面没有了呢"></el-empty>
            </el-col>
          </div>
        </div>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import {useRouter} from 'vue-router';
import {defineComponent} from 'vue';
import axios from "axios";

let gateway = 'http://localhost:8093/hotel/hotel'

let dialogImageUrl = 'http://rufnvmzv0.bkt.clouddn.com/'
export default defineComponent({
  name: 'Hotel',
  data() {
    return {
      gateway: gateway,
      // 下拉菜单
      showCode: false,
      // 图片前缀
      dialogImageUrl: dialogImageUrl,

      // 入住时间不能选择已经过去的时间
      datePickerOptions: {
        disabledDate: time => {
          const currentDate = new Date();
          currentDate.setHours(0, 0, 0, 0);
          return time.getTime() < currentDate.getTime();
        },
      },

      // 酒店设施
      facilityList: [
        {"id": 1, "name": "测试设备1"},
        {"id": 2, "name": "测试设备2"},
        {"id": 3, "name": "测试设备3"},
        {"id": 4, "name": "测试设备4"},
      ],

      // 点评数量
      commentsNumList: [
        {"commentsNum": 500, "commentsNumTip": "500条以上"},
        {"commentsNum": 200, "commentsNumTip": "200条以上"},
        {"commentsNum": 100, "commentsNumTip": "100条以上"}
      ],

      // 评分
      scoreList: [
        {"score": 4.8, "tip": "4.8分以上"},
        {"score": 4.5, "tip": "4.5分以上"},
        {"score": 4.0, "tip": "4.0分以上"},
      ],
      // 价格列表
      priceList: [
        {"startPrice": null, "endPrice": 150, "prompt": "150以下"},
        {"startPrice": 150, "endPrice": 300, "prompt": "150-300"},
        {"startPrice": 300, "endPrice": 450, "prompt": "300-450"},
        {"startPrice": 450, "endPrice": 600, "prompt": "450-600"},
        {"startPrice": 600, "endPrice": null, "prompt": "600以上"}
      ],

      // 地区列表
      positionList: [
        {
          "id": 1,
          "cname": "推荐景点1"
        },
        {
          "id": 2,
          "cname": "推荐景点1"
        },
        {
          "id": 3,
          "cname": "推荐景点1"
        },
        {
          "id": 4,
          "cname": "推荐景点1"
        },
        {
          "id": 5,
          "cname": "推荐景点1"
        },
        {
          "id": 6,
          "cname": "推荐景点1"
        },
        {
          "id": 7,
          "cname": "推荐景点1"
        }
      ],
      // 星级列表
      starRatingList: [
        {
          "starRating": 1,
          "starName": "一星级酒店"
        },
        {
          "starRating": 2,
          "starName": "二星级酒店"
        },
        {
          "starRating": 3,
          "starName": "三星级酒店"
        },
        {
          "starRating": 4,
          "starName": "四星级酒店"
        },
        {
          "starRating": 5,
          "starName": "五星级酒店"
        }
      ],
      rentalDays: 0, // 选择的总天数

      selectedCityId: 0,//被选中的地区id
      selectedStarRating: 0, //被选中的星级
      selectedstartPrice: null, // 起始价格
      selectedendPrice: null, // 截止价格
      selectedscore: 0.0, // 评分
      selectedcommentsNum: 0, // 评论数
      selectedFacilities: [], //选中的酒店设施
      queryParams: {},
      searchForm: {
        // 城市名
        city: '',
        // 人数
        guests: '',
        // 酒店星级
        starRating: '',
        // 分页
        pageNum: 0,
        pageSize: 10000,
        rentalDateRange: null // 时间 中间有两个值
      },
      hotels: [
        // 假设这里是搜索到的酒店数据，实际应用中，这些数据应当由后端提供
        {
          id: 1, // 酒店id
          cityId: '', // 城市id
          name: "酒店1", //name
          address: "地址1", //地址
          star: 3, // 酒店星级
          price: 100, // 平均价格
          hotelDesc: '',//酒店介绍
          facility: '', // 设施
          images: [] // 图片集合

        },
        {
          id: 2, // 酒店id
          cityId: '', // 城市id
          name: "酒店1",
          address: "地址1", //地址
          star: 3, // 酒店星级
          price: 100, // 平均价格
          hotelDesc: '',//酒店介绍
          facility: '', // 设施
          images: [] // 图片集合

        },
        {
          id: 3, // 酒店id
          cityId: '', // 城市id
          name: "酒店1",
          address: "地址1", //地址
          star: 3, // 酒店星级
          price: 100, // 平均价格
          hotelDesc: '',//酒店介绍
          facility: '', // 设施
          images: [] // 图片集合

        },
      ]
    }
  },
  computed: {
    buttonClass() {
      return (facilityId) => {
        return this.selectedFacilities.includes(facilityId) ? 'selected' : '';
      };
    }
  },

  methods: {
    // 下拉菜单
    toggleCodeVisibility() {
      this.showCode = !this.showCode;
    },

    // 时间处理
    calculateDays() {
      const range = this.searchForm.rentalDateRange;
      if (range && range[0] && range[1]) {
        const startDate = new Date(range[0]);
        const endDate = new Date(range[1]);
        const days = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
        this.rentalDays = days;
      } else {
        this.rentalDays = 0;
      }
    },

    // 查询全部设施
    queryAllFacility() {
      const url = this.gateway + '/hotelFacilities/selectListOfFacilities'
      axios.get(url).then(res => {
        console.log(res.data)
        this.facilityList = res.data;
      })
    },

    // 根据地区id查找
    queryArea(event, id) {
      if(this.selectedCityId == 0 || this.selectedCityId == id){
        this.selectedCityId = id;
      }else {
        this.selectedCityId = 0;
      }

      this.selectHotelCondition();
    },
    // 根据星级查找
    queryStarRating(event, starRating) {
      if(this.selectedStarRating == 0 || this.selectedStarRating == starRating){
        this.selectedStarRating = starRating;
      }else {
        this.selectedStarRating = 0;
      }

      this.selectHotelCondition();
    },
    // 根据价格查找
    queryPrice(event, startPrice, endPrice) {
      if(this.selectedStarRating == null || this.selectedStarRating == startPrice){
        this.selectedstartPrice = startPrice;
      }else {
        this.selectedstartPrice = null;
      }

      if(this.selectedendPrice == null || this.selectedendPrice == endPrice){
        this.selectedendPrice = endPrice;
      }else {
        this.selectedendPrice = null;
      }

      this.selectHotelCondition();
    },
    // 根据评分查找
    queryScore(event, score) {
      if(this.selectedscore == 0.0 || this.selectedscore == score){
        this.selectedscore = score;
      }else {
        this.selectedscore = 0.0;
      }

      this.selectHotelCondition();
    },
    // 根据评论数查询
    queryCommentsNum(event, commentsNum) {
      if(this.selectedcommentsNum == 0 || this.selectedcommentsNum == commentsNum){
        this.selectedcommentsNum = commentsNum;
      }else {
        this.selectedcommentsNum = 0.0;
      }

      this.selectHotelCondition();
    },

    // 根据设施查询
    queryFacility(id) {
      // 检查当前id是否已存在于列表中
      const index = this.selectedFacilities.indexOf(id);
      if (index !== -1) {
        // 如果存在，从列表中移除当前id
        this.selectedFacilities.splice(index, 1);
      } else {
        // 如果不存在，将当前id添加到列表中
        this.selectedFacilities.push(id);
      }

      this.selectHotelCondition();
    },

    // 条件查询
    selectHotelCondition() {
      const url = this.gateway + '/hotel/selectHotelCondition'
      const params = {
        locationRegion: this.selectedCityId,
        starRating: this.selectedStarRating,
        startPrice: this.selectedstartPrice,
        endPrice: this.selectedendPrice,
        score: this.selectedscore,
        commentsNum: this.selectedcommentsNum,
        facility: this.selectedFacilities
      }
      console.log("下面是条件查询的params的数据")
      console.log(params)
      axios.post(url, params).then(res => {
        console.log(res.data)
        this.hotels = res.data;
      })
    },

    // 查询所有的酒店
    selectHotelAll(){
      axios({
        url: gateway + '/hotel/selectHotelAll',
        method : 'get',
      }).then(res => {
        this.hotels = res.data
      })
    },

    searchHotels() {
      // 这里应当向后端发送请求，获取搜索结果，然后更新 this.hotels
      console.log("搜索酒店", this.searchForm);
      axios({
        url: gateway + '/hotel/selectHotelByName',
        method: 'get',
        params: {
          pageNumber: this.searchForm.pageNum,
          pageSize: this.searchForm.pageSize,
          keyWord: this.searchForm.city,
          star: this.searchForm.starRating
        }
      }).then(res => {
        console.log(res)
        this.hotels = res.data;
      })
    },
    viewHotel(hotel) {
      if(this.searchForm.rentalDateRange == null){
        this.$message.error("请选择入住时间 退房时间")
        return
      }
      console.log(this.searchForm.rentalDateRange)
      // const router = useRouter();
      // 这里可以跳转到酒店详情页面
      this.$router.push({
        name: 'HotelDetail',
        params: {
          hotelId: hotel.id,
          checkInTime : this.searchForm.rentalDateRange[0], // 时间范围
          checkOutTime : this.searchForm.rentalDateRange[1], // 时间范围
          guests: this.searchForm.guests,
        }  // 如果你的路由需要参数，可以在这里传递
      });
    }
  },

  created() {
    this.selectHotelAll();
    this.queryAllFacility();
  }

});
</script>

<style scoped lang="less">
// 去除滚动条
.container {
  overflow-y: hidden;
}

.search-form {
  margin-bottom: 20px;
}

.container {
  width: 1200px;
  margin: 0 auto
}

.movies-channel {
  width: 1120px;
  margin: auto
}

.tags-line {
  padding: 10px 0 !important
}

.tags-line-border {
  border-top: 1px dotted #e5e5e5
}

.tags-title {
  height: 24px;
  line-height: 24px;
  float: left;
  color: #999;
  font-size: 14px
}

.tags {
  margin-left: 40px !important
}

// 不知道作用的css
a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

a:active, a:hover {
  outline-width: 0
}

.header .nav .navbar li a.active {
  color: #fff;
  background-color: #ef4238
}

.city-container.active:after {
  content: " ";
  position: absolute;
  height: 10px;
  bottom: -1px;
  left: 1px;
  right: 1px;
  background-color: #fff;
  z-index: 200
}

.city-container.active .city-selected {
  border-color: #d8d8d8;
  border-bottom-color: #fff
}

.city-container.active .city-list {
  display: block
}

.city-container.active .caret {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg)
}

.subnav .navbar li .active {
  color: #ef4238;
  position: relative;
  cursor: default
}

.subnav .navbar li .active:hover {
  color: #ef4238
}

.subnav .navbar li .active:before {
  content: "";
  width: 2px;
  height: 0;
  display: inline-block;
  position: absolute;
  left: 50%;
  margin-left: -5px;
  top: 53px;
  border-bottom: 7px solid #fff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: none
}

.movie-sale a.active {
  color: #ef4238
}

.movie-sale a.active:hover {
  color: #fff;
  background-color: #ef4238
}

.movie-presale a.active {
  color: #2d98f3
}

.movie-presale a.active:hover {
  color: #fff;
  background-color: #2d98f3
}

.list-pager li.active {
  border-color: #ef4238;
  background-color: #ef4238
}

.list-pager li.active a {
  color: #fff
}

.tags li.active {
  background: #f34d41;
  color: #fff
}

.tags li.active a {
  color: #fff
}

.movies-category a.active {
  color: #fff;
  background-color: #aaa
}

.dropdown-btn {
  background-color: #f9f9f9;
  color: #333;
  padding: 10px;
  border: none;
  cursor: pointer;
  outline: none;
}

.tag-items {
  display: flex;
  flex-wrap: wrap;
}

.tag-item {
  border: 1px solid #000;
  padding: 5px;
  margin: 5px;
}
</style>
